<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin:0;
      padding:0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #000;
      font-size: 26px;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    section p {
      color: #fff;
      letter-spacing: 2px;
    } 
    section .text {
      user-select: none;
    }
    section .text span {
      /* 不设置display 格式 transform没效果 */
      display: inline-block;
      cursor: pointer;
      opacity: 1;
      transition: all .6s;
    }
    section .text span.active {
      animation: fadeOut 2s linear forwards;
    }
    .speaker {
      position:relative;
      top: 10%;
      right: -35%;
      display: flex;
      justify-content: flex-end;
    }
    @keyframes fadeOut {
      0% {
        opacity: 1;
        filter: blur(0);
        transform: translate(0,0) rotate(0deg) scale(1);
      }
      100% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(300px,-100px) rotate(45deg) scale(4);
      }
    }
  </style>
</head>
<body>
  <section>
    <p class="text">Three people can keep a secret if two of them die</p>
    <p class="speaker">——Ben Franklin</p>
  </section>
</body>
<script>
  let text = document.querySelector('.text')
  // 使用正则 将text文本 拆分成每个单词一个span
  text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>")
  // 获取全部span
  let spans = document.querySelectorAll('span')
  // 遍历加事件 加类
  for(let i=0;i<spans.length;i++) {
    spans[i].addEventListener('mouseover',function () {
      spans[i].classList.add('active')
    })
  }
</script>
</html>